
<template>
  <el-card v-loading="cardLoading" class="card">
    <div class="card-header">
      <el-button>重置</el-button>
    </div>
    <el-form ref="formRef" :model="form">
      <el-form-item label="数据集:" prop="dataset_id">
        <el-select v-model="form.dataset_id" clearable filterable style="width: 200px;margin-right: 40px;"
          placeholder="请选择">
          <el-option v-for="item in selectData" :key="item.dataset_id" :label="item.dataset_name"
            :value="item.dataset_id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="图 片：" prop="entity_content">
        <!-- 上传图片 -->
        <el-upload class="avatar-uploader" accept="image/*" :show-file-list="false" :http-request="uploadMainImg">
          <img v-if="form.entity_content" :src="form.entity_content" class="avatar">
          <i v-else class="avatar-uploader-icon">
            <el-icon>
              <Plus />
            </el-icon>
          </i>
        </el-upload>
      </el-form-item>
      <el-form-item label="文件名:" prop="entity_name">
        <el-input v-model="form.entity_name" style="width: 200px;" disabled></el-input>
      </el-form-item>
      <el-form-item>
        <el-button style="width: 100%; margin-top: 10px;" @click="submit" v-permission="['photo:upload:upload']">上传</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>
  
<script setup>
import {
  getDataList,
} from '~/api/photoList.js'
import {
  addData,
} from '~/api/photoUpload.js'
import { ref, onMounted, reactive } from 'vue'
import {
  toast,
  convertFileToDto
} from '~/composables/util.js'

const form = reactive({})
const formRef = ref(null)
const cardLoading = ref(false)
const type = 'IMAGE_CLASSIFICATION'
const selectData = ref([])

async function Init() {
  cardLoading.value = true

  const body = {
    type
  }
  //获取到数据集列表
  await getDataList(body).then(res => {
    console.log(res)
    if (res.data.data !== null) {
      const result = res.data.data.results
      selectData.value = result
    } else {
      toast(res.data.msg, 'warning', false, 3000)
    }
  })
  cardLoading.value = false
}

onMounted(() => {
  Init()
})


//上传图片
const uploadMainImg = async function (file) {
  //创建表单结构
  console.log(file.file)
  const data = new FormData()
  data.append('file', file.file)

  await convertFileToDto(file.file).then(res => {
    console.log(res)
    form.entity_content = res.data
    form.entity_name = res.name
  }).catch(err => {
    console.log(err)
  })
}

//提交表单
const submit = async function () {
  const data = { ...form, type }
  data.entity_content = data.entity_content.split(',')[1]
  console.log('提交的数据为:')
  console.log(data)
  await addData(data).then(res => {
    console.log(res)
    if (res.data.msg !== 'success') {
      toast(res.data.msg, 'warning', false, 3000)
    } else if (res.data.data.error_code) {
      toast(res.data.data.error_msg, 'warning', false, 3000)
    } else {
      toast('上传成功', 'success', false, 3000)
      Init()
      formRef.value.resetFields()
    }
  }).catch(err => {
    console.log(err)
  })
}


</script>
  
<style scoped>
.card {
  display: flex;
  padding: 30px 50px;
}

.image-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: var(--el-fill-color-light);
  color: var(--el-text-color-secondary);
  font-size: 30px;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
  border: 1px dotted #ccc;
  border-radius: 5px;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>